<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
  <div id="app">
    <div>商品名称：<input v-model="name"></div>
    <button v-on:click="cut">减一个</button>
    购买数量{{count}}
    <button v-on:click="add">加一个</button>
    <button v-on:click="addCart">加入购物车</button>
    <div v-if="isMax" style="color: red;">已达到最大购买数量限制</div>
    <div v-for="(item, index) in list" :key="index">
      {{item.name}} x{{item.count}}
    </div>
  </div>

<!--引入vue文件-->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const vm = Vue.createApp({
    //该函数返回数据对象
    data() {
      return {
        name: '',
        count: 0,
        isMax: false,
        list: []
      }
    },
    methods: {
      cut() {
        this.count = this.count - 1
        this.isMax = false
      },
      add() {
        this.count = this.count + 1
      },
      addCart() {
        this.list.push({
          name: this.name,
          count: this.count
        })
      },
    },
    watch: {
      count: function (newVal, oldVal) {
        if (newVal > 10) {
          this.count = 10
          this.isMax = true
        }
        if(newVal < 0) {
          this.count = 0
        }
      },
      name: function() {
        this.count = 0
        this.isMax = false
      }
    }
  }).mount('#app');
</script>


</body>
</html>
